<template>
  <div class="contain-view">

    <a-card title="注册" class="regist-form">
        <div class="row-item">
          <div>账号：</div>
          <a-input v-model="formdata.account" placeholder="请输入账号"></a-input>
        </div>

      <div class="row-item">
        <div>密码：</div>
        <a-input v-model="formdata.password" placeholder="请输入密码"></a-input>
      </div>

      <div class="row-item">
        <div>确认密码：</div>
        <a-input v-model="comfirmPsw" placeholder="请确认密码"></a-input>
      </div>

      <div class="row-item">
        <div>姓名：</div>
        <a-input v-model="formdata.name" placeholder="请输入姓名"></a-input>
      </div>

      <div class="row-item">
        <div>性别：</div>
        <a-input v-model="formdata.sex" placeholder="请选择性别"></a-input>
      </div>

      <div class="row-item">
        <div>手机号：</div>
        <a-input v-model="formdata.phone" placeholder="请输入手机号"></a-input>
      </div>

      <div class="row-item">
        <div>身份证号：</div>
        <a-input v-model="formdata.idCard" placeholder="请输入身份证号"></a-input>
      </div>

      <div class="row-item">
        <div>邮箱：</div>
        <a-input v-model="formdata.email" placeholder="请输入邮箱"></a-input>
      </div>
    </a-card>

    <a-button type="primary" @click="register" class="submit-btn" :loading="loading">注册</a-button>

  </div>
</template>

<script>

import {registerUser} from "@/utils/api";

export default {
name: "register",
  data(){
    return {
      formdata: {
        account: "",//账号
        password: "",//密码
        name: "",//姓名
        sex: "",//性别
        phone: "",//手机号
        idCard: "",//身份证号
        email: ""//邮箱
      },
      comfirmPsw:"",//确认密码
      loading:false,//加载等待
    }
  },
  methods:{
    /*注册点击*/
    register(){
      this.loading = true;
      registerUser({
        method:'POST',
        params: this.formdata
      }).then(res=>{
        var data = res.data;
        this.loading = false;
        if (data.status === true){
          this.$message.success(data.msg)
          this.$router.back()
        }else {
          this.$message.error(data.msg)
        }
      }).catch(err=>{
        this.loading = false;
        this.$message.error("系统异常")
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.contain-view{
  width: 100vw;
  height:100vh;
  text-align: center;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  font-weight: bold;
  font-size: 15px;

  .regist-form{
    margin-top: 60px;
    width: 400px;
    text-align: center;
    .row-item{
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      flex-direction: row;
    }
    .row-item div{
      width: 90px;
      text-align: right;
      color: #333333;
    }
  }
  .submit-btn{
    width: 200px;
    margin-top: 25px;
  }
}
</style>